<html>
<head>
    <title>GLTF2.0 Loader</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="lib/require.js"></script>
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
    <canvas id="main"></canvas>

    <script type="text/javascript">
        require(['../dist/claygl', 'js/createCompositor'], function(clay, createCompositor) {
            var renderer = new clay.Renderer({
                canvas: document.getElementById('main')
            });
            renderer.resize(window.innerWidth, window.innerHeight);
            var timeline =  new clay.Timeline();
            timeline.start();

            var shadowMapPass = new clay.prePass.ShadowMap({
                softShadow: clay.prePass.ShadowMap.VSM
            });

            var cubemap = new clay.TextureCube({
                type: clay.Texture.HALF_FLOAT,
                width: 128,
                height: 128
            });
            clay.util.texture.loadPanorama(
                renderer,
                'assets/textures/hdr/pisa.hdr',
                cubemap,
                { exposure: 1 },
                function () {

                    var ambientCubemapLight = new clay.light.AmbientCubemap({
                        cubemap: cubemap,
                        intensity: 1
                    });
                    ambientCubemapLight.prefilter(renderer);
                    var ambientSHLight = new clay.light.AmbientSH({
                        coefficients: [0.8450393676757812, 0.7135089635848999, 0.6934053897857666, 0.02310405671596527, 0.17135757207870483, 0.28332242369651794, 0.343019962310791, 0.2880895435810089, 0.2998031973838806, 0.08001846075057983, 0.10719859600067139, 0.12824314832687378, 0.003927173092961311, 0.04206192493438721, 0.06470289081335068, 0.036095526069402695, 0.04928380250930786, 0.058642253279685974, -0.009344635531306267, 0.06963406503200531, 0.1312279999256134, -0.05935414880514145, -0.04865729808807373, -0.060036804527044296, 0.04625355824828148, 0.0563165508210659, 0.050963230431079865],
                        intensity: 0.
                    });

                    var loader = new clay.loader.GLTF({
                        rootNode: new clay.Node()
                    });
                    loader.load("assets/models/BoomBox/BoomBox.gltf");

                    loader.on('success', function (res) {
                        var scene = new clay.Scene();
                        scene.add(loader.rootNode);
                        loader.rootNode.scale.set(100, 100, 100);
                        var camera = new clay.camera.Perspective({
                            aspect: renderer.getViewportAspect()
                        });
                        camera.position.y = 2;
                        camera.position.z = 4;
                        camera.lookAt(scene.position);

                        scene.traverse(function (node) {
                            if (node.material) {
                                node.material.define('fragment', 'RGBM');
                                node.material.define('fragment', 'SRGB_DECODE');
                            }
                        });

                        var control = new clay.plugin.OrbitControl({
                            target: camera,
                            domElement: renderer.canvas,
                            sensitivity: 0.4
                        });

                        var light = new clay.light.Directional({
                            intensity: 3,
                            shadowResolution: 1024
                        });
                        light.position.set(10, 10, -5);
                        light.lookAt(scene.position);
                        scene.add(light);

                        var compositor = createCompositor({
                            scene: scene,
                            camera: camera,
                            enableBloom: true
                        });

                        scene.add(ambientCubemapLight);
                        scene.add(ambientSHLight);

                        var planeGeo = new clay.geometry.Plane();
                        var plane = new clay.Mesh({
                            geometry: planeGeo,
                            material: new clay.Material({
                                shader: clay.shader.library.get('clay.standard')
                            }),
                        });
                        plane.material.define('fragment', 'RGBM');
                        plane.material.define('fragment', 'SRGB_DECODE');
                        plane.scale.set(10, 10, 1);
                        plane.position.set(0, -1, 0);
                        plane.rotation.rotateX(-Math.PI / 2);
                        var diffuseTex = new clay.Texture2D({
                            wrapS: clay.Texture.REPEAT, wrapT: clay.Texture.REPEAT
                        });
                        var normalTex = new clay.Texture2D({
                            wrapS: clay.Texture.REPEAT, wrapT: clay.Texture.REPEAT
                        });
                        diffuseTex.load('assets/textures/oakfloor2/oakfloor2_basecolor.png');
                        normalTex.load('assets/textures/oakfloor2/oakfloor2_normal.png');
                        plane.geometry.generateTangents();
                        plane.material.set('diffuseMap', diffuseTex);
                        plane.material.set('normalMap', normalTex);
                        plane.material.set('uvRepeat', [5, 5]);
                        scene.add(plane);

                        timeline.on('frame', function(deltaTime) {
                            control.update(deltaTime);
                            shadowMapPass.render(renderer, scene, camera);
                            // renderer.render(scene, camera);
                            compositor.render(renderer);
                        });
                    });
                }
            );

        });
    </script>
</body>
</html>